// ------------------------------------
// Sass Style
// ------------------------------------

.account-form {
  margin-top: 80px;

  .ant-form-item {
    width: 600px;
  }

  .ant-form-item-label label {
    font-size: 13px;
    margin-right: 20px;
    color: #777;
  }

  .ant-input {
    border-radius: 0;
  }

  .ant-form-explain {
    font-size: 13px;
  }

  .ant-btn-primary {
    color: #fff;
    background-color: #607284;
    border-color: #73818e;
    border-radius: 0;

    &:hover {
      background-color: #9cafc1;
      border-color: #a3aeb7;
    }
  }
}

.account-avatar {
  margin-top: 80px;
  padding-left: 150px;
  display: flex;

  .avatar {
    background-color: #607284;
    width: 160px;
    height: 160px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;

    i {
      color: #eee;
      font-size: 118px;
    }
  }

  .summary {
    margin-left: 40px;
    margin-top: 30px;

    p {
      line-height: 2;
      color: #777;
      font-family: Comic Sans MS;
    }
  }
}

.secure-level {
  display: flex;
  height: 40px;
  align-items: center;

  .pull-left {
    width: 120px;
    text-align: center;
  }

  .ant-progress {

    .ant-progress-bg {
      transition: all 1.8s;
    }

    &.very-weak .ant-progress-bg {
      background-color: #f5222d;
    }
    &.weak .ant-progress-bg {
      background-color: #ff7600;
    }
    &.average .ant-progress-bg {
      background-color: #ffab49;
    }
    &.strong .ant-progress-bg {
      background-color: #40c1ff;
    }
    &.very-strong .ant-progress-bg {
      background-color: #188fff;
    }
    &.secure .ant-progress-bg {
      background-color: #55d4c2;
    }
    &.very-secure .ant-progress-bg {
      background-color: #52c41a;
    }
  }

  .secure-level-text {
    transition: all 3.8s;
  }
}

.security-settings {
  display: flex;
  height: 40px;
  //align-items: center;
  justify-content: space-between;

  &>div {
    display: flex;
    //align-items: center;
  }

  .pull-left {
    width: 120px;
    min-width: 120px;
    text-align: center;
  }

  .content {
    margin: 0 30px;
    font-size: 13px;
  }

  .pull-right {
    width: 180px;
    min-width: 180px;
    height: 20px;

    i {
      margin-right: 10px;
      line-height: 20px;
    }

    .ant-divider-vertical {
      top: 4px;
    }

    span, a {
      font-size: 13px;
    }
  }

  .success {
    color: #090 !important;
  }

  .warning {
    color: #F90 !important;
  }
}